<template>
  <div>
    <header-comm></header-comm>
    <div class="bcg">
      <div class="myapi_box">
        <h2 class="my_tit">我的API</h2>
        <div class="myapi_ser">
          <div class="btn_box">
            <a-button type="primary">
              <router-link to="/apilist">+申请新数据</router-link>
            </a-button>
          </div>
          <div class="serch_box">
            <a-input-search
              placeholder="已申请数据检索"
              @change="dataretrieval"
              v-model="data_retrieval"
              style="width: 250px"
              @search="onSearch"
            />
          </div>
        </div>
        <div class="myapi_con" v-for="(item, i) in myApiList" :key="i">
          <h2>{{item.applyApiName}}</h2>
          <p class="p1">请求密钥：{{item.keyName}}</p>
          <p class="frequency">
            总次数：
            <span class="red">{{item.buyNum}}次</span>
          </p>
          <p class="frequency">
            剩余次数：
            <span class="red">{{item.surplusNum}}次</span>
          </p>
          <p class="api_num">
            <span>
              <a-icon type="bar-chart" class="api_ico" />统计
            </span>
            <span class="api_tit">
              <a-icon type="code" class="api_ico" />接口文档
            </span>
          </p>
          <span class="delete" @click="apidelete(item)">
            <a-icon style="fontSize:22px;color:#00c4ff" type="delete" />
          </span>
        </div>
        <div class="nodata" v-if="!myApiList.length">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";
export default {
  data() {
    return {
      myApiList: "",
      data_retrieval: ""
    };
  },

  methods: {
    onSearch(value) {
      console.log(value);
    },

    getmyApiList() {
      this.axios
        .post(
          "dataCenter/myApiList.php",
          qs.stringify({
            page: 1,
            pageSize: 10,
            sqdwid: this.$store.state.bbl_sqdwid,
            keywords: this.data_retrieval,
            phone:this.$store.state.bbl_phone,
            apiType:1
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.myApiList = res.data.result.data;
          } else {
            this.myApiList = [];
          }
        });
    },
    dataretrieval() {
      this.getmyApiList();
    },
    apidelete(item) {
      this.axios
        .post(
          "dataCenter/myApiDelete.php",
          qs.stringify({
            id_num: item.id_num
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
      this.getmyApiList();

          }else{
             this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    }
  },
  components: {
    headerComm
  },
  created() {
    this.getmyApiList();
  }
};
</script>

<style lang='less'>
.myapi_box {
  position: relative;
  top: 70px;
  left: 1%;
  width: 98%;
  // height: 800px;
  background: #fff;
  padding: 20px;
  text-align: left;
  .my_tit {
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 20px;
  }
  .myapi_ser {
    display: flex;
    button {
      background: #00c4ff;
      border-color: #00c4ff;
    }
    .serch_box {
      margin-left: 20px;
    }
  }
  .myapi_con {
    width: 100%;
    margin: 20px auto;
    border: 1px solid #f1f1f1;
    padding: 40px 30px;
    position: relative;
    .delete {
      position: absolute;
      right: 16px;
      top: 16px;
      cursor: pointer;
    }
    h2 {
      font-size: 22px;
      color: #000;
    }
    .p1 {
      font-size: 16px;
      color: #000;
    }
    p {
      margin: 10px 0;
      font-size: 16px;
    }
    .frequency {
      color: #999;
      .red {
        color: #ff5959;
      }
    }
    .api_num {
      font-size: 18px;
      .api_ico {
        color: #00c4ff;
        font-size: 20px;
        vertical-align: middle;
        margin-right: 5px;
      }
      .api_tit {
        margin-left: 20px;
      }
    }
  }
  .nodata {
    text-align: center;
    color: #999;
  }
}
</style>
